<template>
	<div class="custom-box">
		<div class="bg" :class="{'vip':vip}">
			<div class="back" @click="backFn()" v-if="back"></div>
			<div class="back" @click="custombackBackFn()" v-if="customback"></div>
			<div class="close" v-if="close" @click="closeFn"></div>
			<div class="title">{{title}}</div>
			<div class="custom-body">
				<slot></slot>
			</div>			
		</div>
	</div>

</template>

<script>
export default {
	props:{
		title:{type:String},
		back:{
			type:Boolean,
			default:false
		},
		customback:{
			type:Boolean,
			default:false
		},
		vip:{
			type:Boolean,
			default:false
		},
		close:{
			type:Boolean,
			default:false
		}
	},
	methods:{
		backFn(){
			this.$router.back()//返回上一页
		},
		custombackBackFn(){
			this.$emit('back')//自定义返回
		},
		closeFn(){
			this.$emit('close')
		}
	}
}
</script>

<style scoped lang="scss">
	.custom-box {
		width: 9.46rem;
		height: 7.42rem;
		padding-top: 0.26rem;
		margin: auto;
		position: relative;
		transform: scale(0.85);
		.close{
			width: .8rem;
			height: .8rem;
			background:  url('../../assets/img/close.png') no-repeat;
			background-size: 100% 100%;
			position: absolute;
			right:0;
			top: 0;
			z-index: 2;
		}
		.bg {
			width: 100%;
			height: 100%;
			position: relative;
			background: url('../../assets/img/custom-box.png') no-repeat;
			background-size: 100% 100%;
		}
		.bg.vip{
			background: url('../../assets/img/custom-box1.png') no-repeat;
			background-size: 100% 100%;
		}
		.back{width: .98rem; height: .85rem; background: url('../../assets/img/back.png') no-repeat; background-size: cover; position: absolute; left: 0; top: 0; z-index: 2;}
		.title {
			width: 100%;
			text-align: center;
			font-size: .36rem;
			color: #92603B;
			text-shadow: 0px 4px 9px #FAE9BF;
			-webkit-text-stroke: 0px #FFFFFF;
			text-stroke: 0px #FFFFFF;
			line-height: 0.85rem;
			font-weight: 900;
		}
	}
	.custom-body{
		width: 100%;
		height: 6.31rem;
		padding: 0.33rem 0.37rem 0.5rem 0.37rem;		
	}
</style>